import React from 'react'
import Menu from '@/views/Menu'
import "@/assets/css/OrderInfo.scoped.css"

const Component = () =>
{
  return (
    <>
      <div className='notice'>
        <div className='title'>
          <sup>“</sup>
          一起在这家店拼单吧，种类繁多，好吃又实惠~
          <sup>”</sup>
        </div>
        <div className='tip'>
          <div className='left'>还差<b className='nums'>1</b>人拼成</div>
          <div className='right'>
            <span className='time'>12</span> : 
            <span className='time'>34</span> : 
            <span className='time'>1</span>
            后结束拼单
          </div>
        </div>
        <div className='people'>
          <div className='avatar'>
            <img src={require('@/assets/images/avatar.png')} />
          </div>
          <div className='avatar'>
            <img src={require('@/assets/images/avatar.png')} />
          </div>
          <div className='nobody'></div>
          <div className='nobody'></div>
        </div>
      </div>

      <div className='box'>
        <div className='shop'>
          <div className='logo'>
            <img src={require('@/assets/images/avatar.png')} />
          </div>
          <div className='info'>
            <div className='name'>炸鸡汉堡店</div>
            <div className='amount'>已销量500单</div>
            <Link className='link' to="/food/shop">店铺详情 &gt;</Link>
          </div>
        </div>
        <div className='order'>
          <div className='title'>订单信息</div>
          <React.UI.List className="OrderInfo">
            <React.UI.List.Item prefix={<React.ICON.EnvironmentOutline />} onClick={() => {}}>配送地址：广州海珠区赤岗西路111，222号E栋</React.UI.List.Item>
            <React.UI.List.Item prefix={<React.ICON.CollectMoneyOutline />}>订单号码：3201 1759 0025 7147 622</React.UI.List.Item>
            <React.UI.List.Item prefix={<React.ICON.FileOutline />}>支付方式：微信支付</React.UI.List.Item>
            <React.UI.List.Item prefix={<React.ICON.ReceiptOutline />}>支付金额：￥12</React.UI.List.Item>
            <React.UI.List.Item prefix={<React.ICON.ClockCircleOutline />}>下单时间：2024-07-02</React.UI.List.Item>
            <React.UI.List.Item prefix={<React.ICON.AppOutline />}>订单状态：已完成</React.UI.List.Item>
          </React.UI.List>
        </div>
        <div className='food'>
          <div className='title'>更多拼单商品</div>
          <div className='list'>
            <div className='item'>
              <div className='thumb'>
                <img src={require('@/assets/images/food1.png')} />
              </div>
              <div className='info'>
                <div className='title'>香辣鸡腿中国汉堡+翅根+冰柠可乐</div>
                <div className='amount'>已拼700+份</div>
                <div className='price'>￥12元</div>
                <React.UI.Button color='primary' fill='solid' size="mini">立即拼单</React.UI.Button>
              </div>
            </div>
            <div className='item'>
              <div className='thumb'>
                <img src={require('@/assets/images/food1.png')} />
              </div>
              <div className='info'>
                <div className='title'>香辣鸡腿中国汉堡+翅根+冰柠可乐</div>
                <div className='amount'>已拼700+份</div>
                <div className='price'>￥12元</div>
                <React.UI.Button color='primary' fill='solid' size="mini">立即拼单</React.UI.Button>
              </div>
            </div>
            <div className='item'>
              <div className='thumb'>
                <img src={require('@/assets/images/food1.png')} />
              </div>
              <div className='info'>
                <div className='title'>香辣鸡腿中国汉堡+翅根+冰柠可乐</div>
                <div className='amount'>已拼700+份</div>
                <div className='price'>￥12元</div>
                <React.UI.Button color='primary' fill='solid' size="mini">立即拼单</React.UI.Button>
              </div>
            </div>
            <div className='item'>
              <div className='thumb'>
                <img src={require('@/assets/images/food1.png')} />
              </div>
              <div className='info'>
                <div className='title'>香辣鸡腿中国汉堡+翅根+冰柠可乐</div>
                <div className='amount'>已拼700+份</div>
                <div className='price'>￥12元</div>
                <React.UI.Button color='primary' fill='solid' size="mini">立即拼单</React.UI.Button>
              </div>
            </div>
            <div className='item'>
              <div className='thumb'>
                <img src={require('@/assets/images/food1.png')} />
              </div>
              <div className='info'>
                <div className='title'>香辣鸡腿中国汉堡+翅根+冰柠可乐</div>
                <div className='amount'>已拼700+份</div>
                <div className='price'>￥12元</div>
                <React.UI.Button color='primary' fill='solid' size="mini">立即拼单</React.UI.Button>
              </div>
            </div>
            <div className='item'>
              <div className='thumb'>
                <img src={require('@/assets/images/food1.png')} />
              </div>
              <div className='info'>
                <div className='title'>香辣鸡腿中国汉堡+翅根+冰柠可乐</div>
                <div className='amount'>已拼700+份</div>
                <div className='price'>￥12元</div>
                <React.UI.Button color='primary' fill='solid' size="mini">立即拼单</React.UI.Button>
              </div>
            </div>
            <div className='item'>
              <div className='thumb'>
                <img src={require('@/assets/images/food1.png')} />
              </div>
              <div className='info'>
                <div className='title'>香辣鸡腿中国汉堡+翅根+冰柠可乐</div>
                <div className='amount'>已拼700+份</div>
                <div className='price'>￥12元</div>
                <React.UI.Button color='primary' fill='solid' size="mini">立即拼单</React.UI.Button>
              </div>
            </div>
            <div className='item'>
              <div className='thumb'>
                <img src={require('@/assets/images/food1.png')} />
              </div>
              <div className='info'>
                <div className='title'>香辣鸡腿中国汉堡+翅根+冰柠可乐</div>
                <div className='amount'>已拼700+份</div>
                <div className='price'>￥12元</div>
                <React.UI.Button color='primary' fill='solid' size="mini">立即拼单</React.UI.Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Menu />
    </>
  )
}

export default Component